import React from 'react';
import {
  Row,
  Col,
  Table,
} from 'antd';
import moment from 'moment'
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import { Link } from 'dva/router';
import CustomOrderDetail from './CustomOrderDetail'
import '../../CustomService/OrderInfo/OrderInfo.less'

export default class CustomOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pagesize: 10
      },
      onChange: this.onChange,
      keyword: '',
      operationHidden:'operationHidden',
    }
  };

  componentDidMount() {
    this.getOrderInfo();
    this.getUserOrgan();
  };

  getUserOrgan=()=>{
    const token = sessionStorage.getItem("token");
    axios
        .get(`${config.api}User/UserOrganInfo`, { headers: { Authorization: 'Bearer ' + token } })
        .then((data) => {
            this.setState({
              operationHidden:data.data.organCode,
            })
        })
        .catch(err => {
          intercept;
        })
  }

  search(value) {
    this.setState({ keyword: value });
    this.getOrderInfo({ keyword: value });
  }

  onChange = (pagination, filters, sorter) => {
    this.getOrderInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };

  getOrderInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
    axios
      .get(`${config.api}CustomLine/GetCustomOrders?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyWord=${keyword}`, { headers: { Authorization: 'Bearer ' + token } })
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        pagination.total = data.data.pageList.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
      }).catch(err => {
        intercept;
      });
  };

  render() {
    const Search = Input.Search;
    const statusstr = ['待支付', '已支付', '已取消', '已打印', '客服申请退款', '客服申请退款成功', '超时支付申请退款', '超时支付退款成功', '用户申请退款', '退款成功'];
    const columns = [
      {
        title: '订单号',
        dataIndex: 'orderCode',
        width: 120
      }, {
        title: '用户手机',
        dataIndex: 'userPhone',
        width: 100
      }, {
        title: '订单人数',
        dataIndex: 'seatAmount',
        width: 60
      }, {
        title: '总金额（元）',
        dataIndex: 'originalTotalPrice',
        // sorter: true,
        width: 80
      }, {
        title: '发车时间',
        //dataIndex: 'doTime',
        key: 'time',
        width: 100,
        render: (text, record) => {
          return (
            <span>{new moment(record.startDate).format('YYYY-MM-DD') + ' ' + record.startTime}</span>
          )
        }
      },
      {
        title: '线路名称',
        dataIndex: 'busLineName',
        width: 100
      },
      {
        title: '上车点',
        dataIndex: 'upPointName',
        width: 100
      },
      {
        title: '下车点',
        dataIndex: 'downPointName',
        width: 100
      }, {
        title: '订单归属单位',
        dataIndex: 'stationCode',
        // sorter: true,
        width: 100
      }, {
        title: '下单时间',
        dataIndex: 'doTime',
        width: 100,
        render: (text, record) => {
          return (
            <span>{new moment(record.doTime).format('YYYY-MM-DD hh:mm')}</span>
          )
        }
      }, {
        title: '订单状态',
        dataIndex: 'orderStatus',
        width: 100,
        className: 'childtable',
        render: (text, record) => {
          return (
            <span>{statusstr[record.orderStatus]}</span>
          )
        }
      }, {
        title: '操作',
        width: 150,
        key: 'action',
        className:this.state.operationHidden=="41" ? "":"operationHidden",
        render: (text, record) => {
          return (
            <span>
              <Link style={{ color: record.isCanRefund ? '#108ee9' : 'gray' }} to={record.isCanRefund ? `/CustomApplyRefund?orderCode=${record.orderCode}` : '#'}>{record.isCanRefund ? '申请退款' : '已申请'}</Link>
              {/* <span className="ant-divider" />
              <a href="#" className="ant-dropdown-link">
                更多操作
              <Icon type="down" />
              </a> */}
            </span>
          )
        }
      }
    ];
    const className = "components-table-demo-nested";
    const expandedRowRender = record => <CustomOrderDetail orderId={record.orderId} />; //<p>{record.orderCode}</p>;

    return (
      <div>
        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div
              style={{
                textAlign: 'center',
                margin: 10
              }}>
              <Search
                placeholder="请输入任意查询条件"
                style={{
                  width: 600
                }}
                onSearch={value => this.search(value)} />
            </div>
            <Table
              rowKey={record => record.orderId}
              {...this.state}
              expandedRowRender={expandedRowRender}
              bordered={true}
              className={className}
              columns={columns}
              style={{ background: 'white' }}
            />
          </Col>

        </Row>
      </div>
    )
  }
}
